import React, { Component } from 'react';
import TabSel from '../TabSel'
class Index extends Component {
  state = {
    activeIndex: 0
  }
  render() {
    const { tabs } = this.props
    const { activeIndex } = this.state
    return (
      <div>
        <div className="title">
          {
            tabs.length > 0 && tabs.map((v, i) => {
              return <b key={v.id}
                className={i === activeIndex ? 'active' : ''}
                onClick={() => this.setState({ activeIndex: i })}
              >{v.title}</b>
            })
          }
        </div>
        <div className="content">
          <ul>
            {
              tabs.length > 0 && tabs[activeIndex].children.map(v => {
                return (
                  <TabSel key={v.id} v={v}></TabSel>
                )
              })
            }
          </ul>
        </div>
      </div>
    );
  }
}

export default Index;
